<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .label {
            display: inline-block;
            width: 20px;
            /* background-color: lightblue; */
            text-align: center;
        }
    </style>
    <script src="./lib/vue2.4.4.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <input type="text" v-model="addA"> <span class="label">+</span> <input type="text" v-model="addB"> <input type="button" value="=" @click="funcAdd"> <span>{{addC}}</span>
        </div>
        <div>
            <input type="text" v-model="subA"> <span class="label">-</span> <input type="text" v-model="subB"> <input type="button" value="=" @click="funcSub"> <span>{{subC}}</span>
        </div>
        <div>
            <input type="text" v-model="mulA"> <span class="label">*</span> <input type="text" v-model="mulB"> <input type="button" value="=" @click="funcMul"> <span>{{mulC}}</span>
        </div>
        <div>
            <input type="text" v-model="divA"> <span class="label">/</span> <input type="text" v-model="divB"> <input type="button" value="=" @click="funcDiv"> <span>{{divC}}</span>
        </div>

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                addA: '',
                addB: '',
                addC: '',
                subA: '',
                subB: '',
                subC: '',
                mulA: '',
                mulB: '',
                mulC: '',
                divA: '',
                divB: '',
                divC: ''
            },
            methods: {
                funcAdd(){
                    var a = this.addA, b = this.addB;
                    if(a && b) {
                        var c = parseInt(a) + parseInt(b);
                        this.addC = `${a} + ${b} = ${c}`;
                        this.addA = '';
                        this.addB = '';
                    }
                },
                funcSub(){
                    var a = this.subA, b = this.subB;
                    if(a && b) {
                        var c = parseInt(a) - parseInt(b);
                        this.subC = `${a} - ${b} = ${c}`;
                        this.subA = '';
                        this.subB = '';
                    }
                },
                funcMul(){
                    var a = this.mulA, b = this.mulB;
                    if(a && b) {
                        var c = parseInt(a) * parseInt(b);
                        this.mulC = `${a} * ${b} = ${c}`;
                        this.mulA = '';
                        this.mulB = '';
                    }
                },
                funcDiv(){
                    var a = this.divA, b = this.divB;
                    if(a && b) {
                        var c = parseInt(a) / parseInt(b);
                        this.divC = `${a} / ${b} = ${c}`;
                        this.divA = '';
                        this.divB = '';
                    }
                }
            }
        });
    </script>
</body>

</html>